﻿<template>
  <div>
    <label v-if = "cell.UI === 'Label'">{{cell.Value}}</label>
    <el-input v-else-if = "cell.UI === 'Input'" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable"></el-input>
    <el-input v-else-if = "cell.UI === 'EmailInput'" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable" @blur="checkInput()" @change="checkInput()"></el-input>
    <el-input v-else-if = "cell.UI === 'IDInput'" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable" @blur="checkInput()" @change="checkInput()"></el-input>
    <el-input-number v-else-if = "cell.UI === 'IntInput'" controls-position="right" :precision="0" :step="1" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable" @blur="checkInput()" @change="checkInput()"></el-input-number>
    <IP4Input v-else-if = "cell.UI === 'IPv4Input'" :isShow="wscontrol" :style="showStyle" :value.sync = 'cell.Value' :isEnable="cell.IsEnable" :isReadOnly="cell.IsReadOnly"></IP4Input>
    <el-input v-else-if = "cell.UI === 'IPv6Input'" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable" @blur="checkInput()" @change="checkInput()"></el-input>
    <el-input v-else-if = "cell.UI === 'MACInput'" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable" @blur="checkInput()" @change="checkInput()"></el-input>
    <el-input v-else-if = "cell.UI === 'MobileInput'" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable" @blur="checkInput()" @change="checkInput()"></el-input>
    <el-input-number v-else-if = "cell.UI === 'Money'" controls-position="right" :precision="2" :step="1" :style="showStyle" v-model = "cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable"></el-input-number>
    <el-input v-else-if = "cell.UI === 'TextArea'" :disabled = "!cell.IsEnable" :readonly="cell.IsReadOnly" v-model = 'cell.Value' type = 'textarea' autosize></el-input>
    <el-switch v-else-if = "cell.UI === 'Switch'" :disabled = "!cell.IsEnable" :readonly="cell.IsReadOnly" v-model = 'cell.Value'></el-switch>
    <el-checkbox-group v-else-if = "cell.UI === 'CheckBox'" :disabled = "!cell.IsEnable" :readonly="cell.IsReadOnly" v-model = 'cell.Value'>
      <el-checkbox v-for="data in cell.UIData" :label="data.code" :key="data.code">{{data.value}}</el-checkbox>
    </el-checkbox-group>
    <Tinymce-Component v-else-if = "cell.UI === 'RichText'" ref = "myTinymce" :disabled = "!cell.IsEnable" :readonly="cell.IsReadOnly"
            :defaultValue.sync = 'cell.Value' :showTinymce = "cell.UI === 'RichText'"></Tinymce-Component>
    <div v-else-if = "cell.UI === 'MD'">
      <Editor-Md  ref = "myMD" :disabled = "!cell.IsEnable"
            :defaultValue.sync = 'cell.Value' :showMD = "cell.UI === 'MD'"></Editor-Md>
    </div>
    <div v-else-if = "cell.UI === 'JSONEditor'">
      <Editor-Md-Json  ref = "myJSONEditor" :disabled = "!cell.IsEnable"
            :defaultValue.sync = 'cell.Value' :showMDJson = "cell.UI === 'JSONEditor'"></Editor-Md-Json>
    </div>
    <!-- 地图 -->
    <MapXY v-else-if = "cell.UI === 'MapXY'" :isDisabled = "!cell.IsEnable" :value.sync='cell.Value'></MapXY>
    <el-date-picker v-else-if = "cell.UI === 'CalendarDate'" format = "yyyy-MM-dd" value-format = "yyyy-MM-dd" v-model="cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable"></el-date-picker>
    <el-date-picker v-else-if = "cell.UI === 'CalendarYear'" type="year" format = "yyyy" value-format = "yyyy" v-model="cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable"></el-date-picker>
    <el-date-picker v-else-if = "cell.UI === 'CalendarYearMonth'" type="month" format = "yyyy-MM" value-format = "yyyy-MM" v-model="cell.Value" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable"></el-date-picker>
    <el-select v-model = "cell.Value" v-else-if = "cell.UI === 'Select'" :readonly="cell.IsReadOnly" :disabled="!cell.IsEnable">
    <el-option v-for = "op in cell.UIData" :key = 'op.code' :value = 'op.code' :label = 'op.value'></el-option>
    </el-select>
    <fm-upload v-else-if = "cell.UI === 'File' || cell.UI === 'Files'" :dataModel.sync = "cell.Value" :widget = 'fmupload' :showEditElementDataDialog = "cell.UI === 'File' || cell.UI === 'Files'">
    </fm-upload>
    <div :hidden="!showErr" class="err">{{cell.validErr}}</div>
  </div>
</template>
<style lang = 'scss' scoped>
  .err {
    color: red;
  }
  .err-input {
    border-color: red;
  }
</style>
<script>
// 上传文件
import FmUpload from '@/components/common/TheUpload.vue'
// 上传图片
import FmUploadPic from '@/components/common/TheUploadPic.vue'
import TinymceComponent from '@/components/Tinymce/TinymceComponent'
// MD编辑器
import EditorMd from '@/components/EditorMd/EditorMd'
// JSONEditor编辑器
import EditorMdJson from '@/components/EditorMd/EditorMdJson'
import IP4Input from '@/components/extendComponents/IP4Input.vue'
import MapXY from '@/components/extendComponents/MapXY.vue'
import { isIdentityId } from '@/components/commonUse.js'
export default{
  props: ['wscontrol', 'cellitem'],
  components: { TinymceComponent, IP4Input, EditorMd, EditorMdJson, MapXY, FmUpload, FmUploadPic },
  data () {
    return {
      cell: {
        Title: '姓名',
        Name: 'n',
        Value: '',
        UI: 'Input',
        IsReadOnly: false,
        IsEnable: true,
        UIData: null,
        isValid: true,
        validErr: ''
      },
      fmupload: {
        type: 'File',
        options: {
          limit: 1,
          disabled: false
        }
      },
      showErr: false,
      showStyle: ''
    }
  },
  methods: {
    initComponent () {
      this.cell = {}
      this.cell = this.cellitem
      if (this.cell.UI === 'File') {
        this.fmupload = {
          type: 'File',
          options: {
            limit: 1,
            disabled: !this.cell.IsEnable
          }
        }
      }
      if (this.cell.UI === 'Files') {
        this.fmupload = {
          type: 'Files',
          options: {
            limit: 10,
            disabled: !this.cell.IsEnable
          }
        }
      }
    },
    clearData () {
      this.cell = {}
    },
    checkInput () {
      if (this.cell.UI === 'EmailInput') {
        let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if (this.cell.Value && !regEmail.test(this.cell.Value)) {
          this.cell.isValid = false
          this.cell.validErr = '请输入正确的邮箱地址'
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      } else if (this.cell.UI === 'IDInput') {
        let err = isIdentityId(this.cell.Value)
        if (this.cell.Value && err !== '') {
          this.cell.isValid = false
          this.cell.validErr = err
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      } else if (this.cell.UI === 'IntInput') {
        if (this.cell.Value && !Number.isInteger(this.cell.Value)) {
          this.cell.isValid = false
          this.cell.validErr = '请输入整数'
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      } else if (this.cell.UI === 'IPv4Input') {
        let reg = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?)(,((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d))|\*)((\/([012]\d|3[012]|\d))?))*$/
        if (this.cell.Value && !reg.test(this.cell.Value)) {
          this.cell.isValid = false
          this.cell.validErr = '请输入正确的IP地址'
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      } else if (this.cell.UI === 'IPv6Input') {
        let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
        if (this.cell.Value && !reg.test(this.cell.Value)) {
          this.cell.isValid = false
          this.cell.validErr = '请输入正确的IPv6地址'
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      } else if (this.cell.UI === 'MACInput') {
        let reg = /[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}/
        if (this.cell.Value && !reg.test(this.cell.Value)) {
          this.cell.isValid = false
          this.cell.validErr = '请输入正确的MAC地址'
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      } else if (this.cell.UI === 'MobileInput') {
        let reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if (this.cell.Value && !reg.test(this.cell.Value)) {
          this.cell.isValid = false
          this.cell.validErr = '请输入正确的电话号码'
        } else {
          this.cell.isValid = true
          this.cell.validErr = ''
        }
      }
      if (this.cell.isValid === false) {
        this.showErr = true
        this.showStyle = 'border:1px solid red'
      } else {
        this.showErr = false
        this.showStyle = ''
      }
    }
  },
  mounted () {
    this.initComponent()
  },
  destroyed () {
    this.cell = {}
  },
  watch: {
    wscontrol: {
      handler: function (val, oldVla) {
        console.info('control changed：' + val)
        if (val) {
          this.initComponent()
        } else {
          this.clearData()
        }
      }
    }
  }
}
</script>
